<template>
    <div v-loading="loading" class="Main">
        <div class="w1440">
            <div class="MainLeft">
                <div class="ForumBox bgwhite slideTxt">
                    <el-tabs v-model="activeTab">
                        <el-tab-pane label="博主" name="first">
                            <div v-if="currentList.length" class="blogger-list">
                                <div class="Popular_bloggers">
                                    <div class="Popular_bloggersBox">
                                        <ul class="d-flex f-wrap j-sb">
                                            <li v-for="(item, index) in currentList" :key="index">
                                                <div @click="goToTargetPage('/otherInfo?uid=' + item.uid, item.uid)"
                                                    class="img">
                                                    <div class="imgbox">
                                                        <span><img src="../assets/uploadfiles/image/logo.png" alt=""></span>
                                                    </div>
                                                </div>
                                                <div class="txt">
                                                    <div class="tit dot pointer"
                                                        @click="goToTargetPage('/otherInfo?uid=' + item.uid, item.uid)">
                                                        <a>{{ item.username }}</a>
                                                    </div>
                                                    <div class="dec dot">作品 {{ formatCommentCount(item.postNum) }} / 粉丝
                                                        {{ formatCommentCount(item.fans) }}</div>
                                                    <div class="gzbtn" v-if="item.uid !== userInfoCommon.uid"
                                                        @click="followUser(item)">{{ item.isFollow ? '取消关注' : '+ 关注' }}
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <!-- 分页 -->
                                <div class="pager d-flex j-center">
                                    <el-pagination v-model:current-page="queryParams.pageNo"
                                        v-model:page-size="queryParams.pageSize" background
                                        layout="prev, pager, next, jumper" :total="queryParams.total" />
                                </div>
                            </div>
                            <el-empty v-else :image-size="100" />
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <Space height="50" />
                <div class="ForumBox bgwhite slideTxt">

                    <el-tabs v-model="activeTab">
                        <el-tab-pane label="帖子" name="first">
                            <div v-if="postList.length" class="post-content">
                                <ul class="ForumList">
                                    <li v-for="(item, index) in postList" :ket="index" class="dot">
                                        <router-link :to="'/commentpost?id=' + item.id" tag="a">
                                            <div class="tit">
                                                <b>{{ index + 1 }}</b>
                                                <em class="dot">{{ item.title }}</em>
                                                <i class="hot" v-if="item.readCount > 500">热</i>
                                                <div class="view">{{ formatCommentCount(item.readCount) }}</div>
                                            </div>
                                        </router-link>
                                    </li>
                                </ul>
                                <!-- 分页 -->
                                <div class="pager d-flex j-center">
                                    <el-pagination v-model:current-page="postQueryParams.pageNo"
                                        v-model:page-size="postQueryParams.pageSize" background
                                        layout="prev, pager, next, jumper" :total="postQueryParams.total" />
                                </div>
                            </div>
                            <el-empty v-else :image-size="100" />
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="BloggerList">
import { userApi,postApi } from '@/api';
import { computed, ref, reactive, onBeforeMount, watch } from 'vue';
import { useRouter } from 'vue-router';
import { commonMethods } from '@/utils/common';
import { storeToRefs } from 'pinia';
import { useCommonStore } from '@/store/Common';
import { ElNotification } from 'element-plus';

// 公共方法和计算属性
const { formatCommentCount } = commonMethods();

// 公共store
const commonStore = useCommonStore();
const { userInfoCommon } = storeToRefs(commonStore);

// 路由
const router = useRouter();
const goToTargetPage = (path, uid) => {
    // 如果是自己的信息，跳转到用户信息页面，否则跳转到其他用户信息页面
    if (uid === userInfoCommon.value.uid) {
        router.push('/userInfo');
    } else {
        router.push(path);
    };
}

/**
 * @name 数据
 */
const partName = ref(''); // 版块名称
const activeTab = ref('first'); // 选中的标签页
const loading = ref(true); // 加载中

/**
 * @name 生命周期
 */
onBeforeMount(() => {
    getHotBlogger();
    getPostList();
})

/**
 * @name 博主列表
 */
const currentList = ref([]);
const queryParams = reactive({
    pageNo: 1,
    pageSize: 12,
    keyword: '',
    timeRange: 0,
    total: 0
})
const getHotBlogger = () => {
    loading.value = true;
    queryParams.keyword = router.currentRoute.value.query.keyword || '';
    userApi.getHotBlogger(queryParams).then((res) => {
        let { list } = res.result;
        list.filter((item) => {
            item.fans = parseInt(item.fans);
        })
        currentList.value = list;
        queryParams.total = Number(res.result.total);
    }).catch(err => { }).finally(() => {
        loading.value = false;
    });
}

// 关注用户
const hotBlogger = ref(null);
const followUser = (item) => {
    if (item.isFollow) {
        // 取消关注
        userApi.followCancel({ id: item.uid }).then((res) => {
            item.isFollow = false;
            ElNotification({
                title: '提示',
                message: '已取消关注',
                type: 'success',
            })
            if (hotBlogger.value) {
                hotBlogger.value.getHotBlogger() // 调用子组件方法
            }
            item.fans = item.fans - 1; // 减少粉丝数
        }).catch(err => { });
    } else {
        // 关注用户
        userApi.followAdd({ id: item.uid }).then((res) => {
            item.isFollow = true;
            ElNotification({
                title: '提示',
                message: '已关注',
                type: 'success',
            })
            if (hotBlogger.value) {
                hotBlogger.value.getHotBlogger() // 调用子组件方法
            }
            item.fans = item.fans + 1; // 增加粉丝数
        }).catch(err => { });
    }
}

/**
 * @name 帖子
 */
const postList = ref([]);
const postQueryParams = reactive({
    isRecommend: false,
    keyword: '',
    sortField: 'createTime',
    sortOrder: 'desc',
    pageNo: 1,
    pageSize: 10,
    total: 0
})
const getPostList = () => {
    postQueryParams.keyword = router.currentRoute.value.query.keyword || '';
    postApi.getPostList(postQueryParams).then((res) => {
        postList.value = res.result.list;
        postQueryParams.total = Number(res.result.total);
    }).catch((err) => {})
}

/**
 * @name 刷新页面
 */
const refreshPage = () => {
    queryParams.pageNo = 1;
    postQueryParams.pageNo = 1;
    getHotBlogger();
    getPostList();
}

// 监听查询参数变化
watch(() => router.currentRoute.value.query.keyword, () => {
    refreshPage();
})
watch(() => queryParams.pageNo, () => {
    getHotBlogger();
})
watch(() => postQueryParams.pageNo, () => {
    getPostList();
})


</script>

<style lang="less" scoped>
:deep(.el-carousel__container) {
    height: 355px;
}

:deep(.el-tabs__item) {
    font-size: 20px;
    color: #666;
    padding-bottom: 10px;
}

:deep(.el-tabs__item.is-active) {
    color: #333;
}

:deep(.el-tabs__active-bar) {
    background-color: #00753e;
}

.blogger-list {
    min-height: 300px;

    ul {
        li {
            width: 45%;
        }
    }
}
</style>